<!--学员笔记区-->
<div class="note-list" id="note-list">
  <div class="empty" v-if="notes.length<=0">该课程暂无笔记</div>
  <template v-for="note in notes">
  <div class="media note-item">
    <!--头像-->
    <div class="media-left">
      <a class="js-user-card" href="/user/home/909">
        <img class="avatar-sm" src="/static/img/pk.jpg">
      </a>
    </div>
    <div class="media-body">
      <div class="content">
        <!--笔记内容-->
        <div class="editor-text">
          <p>{{note.content}}</p>
        </div>
      </div>
      <div class="metas clearfix">
        <!--昵称-->
        <a class="link-dark name" :href="'/user/'+note.user.id+'/home'">{{note.user.username}}</a>
        <span>{{note.time}}</span>
        <a href="/course/57/info" class="period" target="_blank">{{note.task.name}}</a>
      </div>
    </div>
  </div>
  </template>

  <nav v-if="page.totalPages>1" class="text-center">
    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
  </nav>

</div>

<script>
  var vms = new Vue({
      el:"#note-list",
      data: {
        notes:[],
        page:{
            pageNum:1,
            totalPages:1,
            limit:8,
            totalRows:1
        },
        kid:'${kid}'
      },
      watch: {
        'page.pageNum': function () {
              this.showNotes();
          }
      },
      methods:{
          gotoPage:function (page) {
              this.page.pageNum = page;
          },

          showNotes:function () {
              var self = this;
              $.post('/note/showAllNotesBykid',{kid: self.kid, page:self.page.pageNum},function (data) {
                  if(data.success){
                      self.notes = [];
                      self.notes = data.payload.rows;
                      self.page.pageNum = data.payload.pageNum;
                      self.page.totalPages = data.payload.totalPages;
                      self.page.totalRows = data.payload.totalRows;
                  }
              })
          }
      },
      created:function () {
          this.showNotes();
      }

  })
</script>
